<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker v-model="listQuery.date" type="monthrange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
      </el-date-picker>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>

    </div>
    <div class="dashboard-editor-container">
      <el-tag>正常催收</el-tag>
      <normal :normal="normal" />
      <el-tag type="danger">逾期催收</el-tag>
      <overdue :overdue="overdue" />

    </div>
  </div>
</template>

<script>
  import Normal from './components/normal'
  import Overdue from './components/overdue'

 import {
    getReportCollectionData
  } from '@/api/report'

  export default {
    name: 'DashboardAdmin',
    components: {
      Normal,
      Overdue
    },
    data() {
      return {
        listQuery: {
          date: [],
        },
        overdue: [],
        normal: [],
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    created() {
      let dt = new Date();
      dt.setDate(1)
      let start_time=dt.setMonth(dt.getMonth())
      let end_time=dt.setMonth(dt.getMonth()+3)
      let end_month=new Date(end_time).getMonth()+1;
       let end= new Date(end_time).getFullYear()+"-"+ end_month
       let start_month=new Date(start_time).getMonth()+1;
       let start= new Date(start_time).getFullYear()+"-"+ start_month
      this.listQuery.date.push(start)
      this.listQuery.date.push(end)
       console.log(this.listQuery);
      this.getReportCollectionData()
    },
    methods: {
      getReportCollectionData() {
        getReportCollectionData(this.listQuery).then(resp => {
                 this.normal=resp.data.normal
                 this.overdue=resp.data.overdue
          //console.log(this.receive)
        })
      },

      handleFilter() {
        this.getReportCollectionData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
